@charset "utf-8";
@function r($px) {
    @return $px/100*1rem;
}

$color:#ec8e12;
.web {
    header {
        font-size: 0;
        overflow: hidden;
        padding: r(48) r(22) r(26) r(23);
        div:last-child {
            font-size: r(26);
            text-align: center;
            transform: translateX(r(-80));
            margin-top: r(20);
        }
    }
    section {
        overflow-y: auto;
        position: absolute;
        top: r(150);
        bottom: r(163);
        width: 100%;
        .search {
            margin: 0 auto;
            width: r(268);
            height: r(55);
            border-radius: r(55);
            border: r(3) solid $color;
            position: relative;
            form {
                width: 100%;
                height: 100%;
                input {
                    width: r(184);
                    height: r(49);
                    padding: 0 r(11) 0 r(5);
                    font-size: r(24);
                    color: #777777;
                    position: absolute;
                    top: r(0);
                    left: r(25);
                    border: none;
                }
                button {
                    width: r(46);
                    height: r(49);
                    background-color: transparent;
                    position: absolute;
                    top: r(0);
                    right: r(13);
                    &::before {
                        content: "";
                        width: r(25);
                        height: r(25);
                        border-radius: 50%;
                        border: r(3) solid $color;
                        position: absolute;
                        top: r(7);
                        left: r(5);
                    }
                    &::after {
                        content: "";
                        width: r(18);
                        height: r(6);
                        background-color: $color;
                        transform: rotate(45deg);
                        position: absolute;
                        top: r(36);
                        left: r(26);
                    }
                }
            }
        }
        .everyone {
            font-size: 0;
            padding: r(31) r(115);
            dl dt {
                font-size: r(26);
                font-weight: bold;
                text-align: center;
                margin-bottom: r(15);
            }
            dl dd {
                width: r(125);
                height: r(64);
                background-color: #dcdcdc;
                margin-left: r(5);
                text-align: center;
                line-height: r(64);
                a {
                    font-size: r(20);
                    color: #a0a0a0;
                }
            }
            dd:nth-of-type(1),
            dd:nth-of-type(5) {
                margin-left: r(0);
            }
            dd:nth-of-type(1),
            dd:nth-of-type(2),
            dd:nth-of-type(3),
            dd:nth-of-type(4) {
                margin-bottom: r(3);
            }
        }
        .hot {
            font-size: 0;
            padding: r(7) r(19) r(0) r(23);
            .hot_nav{
                padding-bottom:r(32);
                .hot_nav_left{
                    i{font-size: r(46);color: $color;vertical-align: middle;}
                    span{margin-left:r(24); font-size: r(30);vertical-align:middle;}
                }
            }
            .hot_particular{
                ul li:first-child{
                        width: r(279);
                        height: r(352);
                        img{width: 100%;}
                    }
                   ul li:nth-of-type(2){
                        width: r(420);
                        height: r(147);
                        margin-left: r(9);
                        img{width: 100%;}
                    }
                  ul li:nth-of-type(3){
                        width: r(195);
                        height: r(197);
                        margin-left: r(9);
                        margin-top: r(5);
                        img{width: 100%;}
                    }
                    ul li:nth-of-type(4){
                        width: r(211);
                        height: r(197);
                        margin-left: r(9);
                        margin-top: r(5);
                        img{width: 100%;}
                    }
                
            }
            .hot_particular_second{
                ul li:first-child{
                        width: r(228);
                        height: r(200);
                        img{width: 100%;}
                    }
                   ul li:nth-of-type(2){
                        width: r(211);
                        height: r(200);
                        margin-left: r(18);
                        img{width: 100%;}
                    }
                  ul li:nth-of-type(3){
                        width: r(220);
                        height: r(200);
                        margin-left: r(18);
                        img{width: 100%;}
                    }
            }
        }
        .hot_second{margin-top: r(48);}
    }
}